<!-- 侧边栏导航组件 -->
<template>
  <div class="sidebar-menu">
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :unique-opened="false"
      :collapse-transition="false"
      mode="vertical"
      router
    >
      <sidebar-item
        v-for="route in routes"
        :key="route.path"
        :item="route"
        :base-path="getBasePath(route.path)"
      />
    </el-menu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import SidebarItem from './SidebarItem.vue'

const route = useRoute()
const userStore = useUserStore()

// 从父组件接收的属性
const props = defineProps({
  routes: {
    type: Array,
    required: true
  },
  isCollapse: {
    type: Boolean,
    default: false
  }
})

// 获取基础路径
const getBasePath = (path) => {
  const roleId = userStore.userInfo?.roleId
  const basePath = roleId === 1 ? '/admin' : '/merchant'
  
  // 如果已经包含基础路径，直接返回
  if (path.startsWith(basePath)) {
    return path
  }
  
  // 如果是以 / 开头，去掉开头的 /
  const cleanPath = path.startsWith('/') ? path.slice(1) : path
  // 拼接基础路径
  return `${basePath}/${cleanPath}`
}

// 当前激活的菜单
const activeMenu = computed(() => route.path)
</script>

<style lang="scss" scoped>
.sidebar-menu {
  border: none;
  height: 100%;
  width: 100% !important;
}
</style> 